<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- STYLESHEETS -->
    <!--[if lt IE 9]>
    <script src="../../js/flot/excanvas.min.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css">
    <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- SELECT2 -->
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css"/>
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css"/>
    <!-- datatable -->
    <link rel="stylesheet" href="../../js/datatables/datatable.css">
    <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
    <link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css"/>
    <!-- FONTS 
	<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
-->
    <style>
        .form-group {
            margin-bottom: 10px;
        }

        .datatable .btn + .btn {
            margin-left: 8px;
        }

        .m-label {
            line-height: 34px;
        }

        .color-red {
            color: red;
        }

        .dataTables_scrollHeadInner {
            width: auto !important;
        }

        .dataTables_scrollHeadInner table {
            width: 100% !important;
        }

        .dataTables_scrollHeadInner table th {
            text-align: center;
        }

        .dataTables_scrollBody table td {
            text-align: center;
            cursor: pointer;
        }

        .dataTables_scrollBody table .now td {
            background-color: #5e87b0 !important;
            color: #fff;
        }
    </style>
</head>

<body>
<header class="navbar clearfix" id="header">
</header>
<!-- PAGE -->
<section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
        <div class="sidebar-menu nav-collapse">

            <!-- SIDEBAR MENU -->
            <ul>

            </ul>
            <!-- /SIDEBAR MENU -->
        </div>

    </div>
    <!-- /SIDEBAR -->
    <div id="main-content">
        <!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
        <div class="container">
            <div class="row">
                <div id="content" class="col-lg-12">
                    <!-- PAGE HEADER-->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="page-header">
                                <!-- STYLER -->
                                <!-- /STYLER -->
                                <!-- BREADCRUMBS -->
                                <ul class="breadcrumb">
                                    <li>
                                        <i class="fa fa-home"></i>
                                        <a href="index.html">首页</a>
                                    </li>
                                    <li>
                                        <a href="#">商品管理 </a>
                                    </li>
                                    <li>福袋管理</li>
                                </ul>
                                <!-- /BREADCRUMBS -->
                            </div>
                        </div>
                    </div>
                    <!-- /PAGE HEADER -->
                    <!-- FORMS QUERY-->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="box border primary">
                                        <div class="box-title">
                                            <h4><i class="fa fa-bars"></i>查询条件</h4>
                                        </div>
                                        <div class="box-body big" style="padding:10px;">
                                            <form class="form-horizontal" role="form" id="form_Promotion">
                                                <div class="form-group mrg-bt10">
                                                    <label class="col-sm-1 control-label" style="width: auto">商品名称：</label>
                                                    <div class="col-sm-2">
                                                        <input type="text" class="form-control" name="productName"
                                                               placeholder="请输入商品名称" id="productNameInput">
                                                    </div>
                                                    <div class="col-sm-1" style="width:84px;">
                                                            <span class="btn btn-primary search"><i class="fa fa-search"></i>
                                                                查询</span>
                                                    </div>
                                                    <div class="col-sm-1" style="width: 126px;">
                                                        <a class="btn btn-success" href="./edit_fortune_bag.html"
                                                           target="_blank"><i class="fa fa-plus-square-o"></i>
                                                            创建福袋</a>
                                                    </div>
                                                    <!-- <div class="col-sm-1">
                            <a class="btn btn-info btn-dc btn-file" href="javascript:void(0)">
                                <i class="fa fa-upload"></i> 导入福袋
                                <input name="uploadFile" upload-file="imageUrlProduct" id='uploadFile'type="file">
                            </a>
                        </div> -->
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- TABLES -->
                        <div class="col-md-12">
                            <!-- BOX -->
                            <div class="box border primary">
                                <div class="box-title">
                                    <h4><i class="fa fa-table"></i>福袋明细</h4>
                                </div>
                                <div class="box-body">
                                    <table id="product_list" cellpadding="0" cellspacing="0" border="0"
                                           class="datatable table table-striped table-bordered table-hover">
                                    </table>
                                </div>
                            </div>
                            <!-- /BOX -->
                        </div>
                    </div>
                    <div class="row">
                        <!-- TABLES -->
                        <div class="col-md-12">
                            <!-- BOX -->
                            <div class="box border primary">
                                <div class="box-title">
                                    <h4><i class="fa fa-table"></i>福袋明细</h4>
                                </div>
                                <div class="box-body">
                                    <table id="send_list" cellpadding="0" cellspacing="0" border="0"
                                           class="datatable table table-striped table-bordered table-hover">
                                    </table>
                                </div>
                            </div>
                            <!-- /BOX -->
                        </div>
                    </div>
                    <!-- /TABLES -->
                    <div class="footer-tools">
                            <span class="go-top">
                                <i class="fa fa-chevron-up"></i> Top
                            </span>
                    </div>
                </div><!-- /CONTENT-->
            </div>
        </div>
    </div>
</section>
<!--/PAGE -->
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JQUERY -->
<script src="../../js/jquery/jquery-2.0.3.min.js"></script>

<!-- BOOTSTRAP -->
<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
<!-- BLOCK UI -->
<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>

<!-- AUTOSIZE -->
<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
<!-- spinner -->
<script src="../../js/spinner/spin.js"></script>
<!-- DATA TABLES -->
<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>

<!-- INPUT MASK -->
<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>

<!-- SELECT2 -->
<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
<!-- UNIFORM -->
<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
<script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
<!-- COOKIE -->
<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../js/script.js"></script>
<script src="../../js/common.js"></script>
<script>
    var Promotion = function () {
        var createId = 0;
        var mbatchNo = 0
        var mskuCode = 0
        var initContractType = function () {
            $("[upload-file=imageUrlProduct]").change(function () {
                var formData = new FormData();
                var name = $("#uploadFile").val();
                formData.append("uploadFile", $("#uploadFile")[0].files[0]);
                formData.append("name", name);
                formData.append("wholesalerId", $('#create-business').val());
                console.log(formData)
                $.ajax({
                    url: App.getContextPath() + 'admin/wholesaler/loadExcelByWholesale.do',
                    type: 'POST',
                    data: formData,
                    // 告诉jQuery不要去处理发送的数据
                    processData: false,
                    // 告诉jQuery不要去设置Content-Type请求头
                    contentType: false,
                    success: function (data) {
                        $("#uploadFile").val('')
                        if (data.type == 'error') {
                            $.alert("导入模板错误");
                        } else {
                            initDateTable(data.extra);
                        }
                    }
                });
            })
        }
        var $mainDataTable = null;
        var searchPromotion = function () {
            var productName = $("input[name=productName]").val();
            var url = App.getContextPath() + "admin/fortuneBag/search.do?productName=" + productName;
            if ($mainDataTable) {
                $mainDataTable.api().ajax.url(url).load();
                return;
            }
            var dtSetting = $.dataTableSetting({
                "ajaxSource": url,
                "serverSide": false,
                "bFilter": false, // 去掉搜索框
                "bLengthChange": true, // 每页显示数量
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                "iDisplayLength": 5,
                "bSort": false,
                "aoColumns": [
                    {
                        "mDataProp": "productId",
                        "sTitle": "商品ID",
                        "width": "8%"
                    }, {
                        "mDataProp": "productCode",
                        "sTitle": "商品编码",
                        "width": "10%"
                    }, {
                        "sTitle": "商品名称",
                        "mDataProp": "productName",
                        "width": "21%"
                    }, {
                        "sTitle": "颜色",
                        "width": "15%",
                        "mDataProp": "color"
                    }, {
                        "sTitle": "福袋SKU编码",
                        "width": "10%",
                        "mDataProp": "skuCode"
                    }, {
                        "sTitle": "尺码",
                        "width": "10%",
                        "mDataProp": "sizeName"
                    }, {
                        "sTitle": "操作",
                        "width": "30%",
                        "render": function (data, type, row) {
                            var str = ''
                            str +=
                                "<a class='btn btn-success btn-xs btn-width btn-create' href='./edit_fortune_bag.html?productName=" +
                                row.productName + "&sizeName=" + row.sizeName + "&color=" +
                                row.color +
                                "&skuCode=" + row.skuCode + "&batchNo=" + row.batchNo + "&bagSkuCount=" + row.bagSkuCount +
                                "' target='_blank' batchNo='" + row.batchNo + "' skuCode='" +
                                row.skuCode +
                                "'><i class='fa fa-edit'></i> 编辑</a>"
                            str += "<a class='btn btn-primary btn-xs btn-width btn-create' href='./copy_fortune_bag.html?skuCode=" + row.skuCode + "&sizeName=" + row.sizeName + "&batchNo=" + row.batchNo +
                                "' target='_blank'><i class='fa fa-edit'></i> 复制</a>"
                            return str;
                        }
                    }]
            });
            $mainDataTable = $("#product_list").dataTable(dtSetting);
        }
        var $mDataTable = null
        var getSendList = function (batchNo, skuCode, $tr) {
            var productName = $("input[name=productName]").val();
            var url = App.getContextPath() + "admin/fortuneBag/searchDetail.do?batchNo=" + batchNo +
                '&skuCode=' +
                skuCode;
            $tr.addClass('now').siblings().removeClass('now')
            if ($mDataTable) {
                $mDataTable.api().ajax.url(url).load();
                return;
            }
            var dtSetting = $.dataTableSetting({
                "ajaxSource": url,
                "serverSide": true,
                "bFilter": false, // 去掉搜索框
                "bLengthChange": true, // 每页显示数量
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                "iDisplayLength": 25,
                "bSort": false,
                "aoColumns": [{
                    "mDataProp": "productName",
                    "sTitle": "商品名称",
                    "width": "20%"
                }, {
                    "mDataProp": "color",
                    "sTitle": "颜色",
                    "width": "10%"
                }, {
                    "sTitle": "SKU编码",
                    "mDataProp": "skuCode",
                    "width": "10%"
                }, {
                    "sTitle": "尺码",
                    "width": "12%",
                    "mDataProp": "sizeName"
                }, {
                    "sTitle": "分组",
                    "width": "10%",
                    "mDataProp": "group"
                }, {
                    "sTitle": "件数",
                    "width": "10%",
                    "mDataProp": "count"
                }, {
                    "sTitle": "优先级",
                    "width": "10%",
                    "mDataProp": "priority"
                }, {
                    "sTitle": "M站库存",
                    "width": "10%",
                    "mDataProp": "stockCount"
                }, {
                    "sTitle": "操作",
                    "width": "8%",
                    "render": function (data, type, row) {
                        var str = ''
                        str +=
                            "<a class='btn btn-danger btn-xs btn-width btn-delete' href='javascript:void(0)' bagSkuCount='" +
                            row.bagSkuCount + "'><i class='fa fa-trash-o'></i> 删除</a>"
                        return str;
                    }
                }]
            });
            $mDataTable = $("#send_list").dataTable(dtSetting);
        }
        var deleteDetail = function (fortuneBags, tr) {
            $.ajax({
                url: App.getContextPath() + 'admin/fortuneBag/saveBatch.do',
                type: 'POST',
                data: {
                    fortuneBags: fortuneBags
                },
                success: function (result) {
                    if (result.type == "success") {
                        tr.remove()
                        $.alert("删除福袋明细成功!");
                    } else {
                        $.alert(result.content);
                    }
                }
            })
        }
        return {
            init: function () {
                $('#product_list').on('click', '.btn-create', function (event) {
                    event.stopPropagation()
                })
                $("#product_list").on('click', 'tr', function () {
                    var $btn = $(this).find('.btn-create')
                    var batchNo = $btn.attr('batchNo')
                    var skuCode = $btn.attr('skuCode')
                    mbatchNo = batchNo
                    mskuCode = skuCode
                    getSendList(batchNo, skuCode, $(this))
                })
                $('#send_list').on('click', '.btn-delete', function (event) {
                    var $this = $(this)
                    $.confirm("确认删除此福袋明细?", function () {
                        // $this.closest('tr').remove()
                        var $tr = $this.closest('tr');
                        var arr = []
                        $tr.siblings().each(function (index, ele) {
                            var $ele = $(ele)
                            var td = $ele.find('td')
                            var srcSkuCode = td.eq(2).text()
                            var group = td.eq(4).text()
                            var count = td.eq(5).text()
                            var priority = td.eq(6).text()
                            var bagSkuCount = $ele.find('.btn-delete').attr(
                                'bagSkuCount')
                            bagSkuCount = bagSkuCount === 'null' ? null :
                                bagSkuCount
                            arr.push({
                                batchNo: mbatchNo,
                                skuCode: mskuCode,
                                srcSkuCode: srcSkuCode,
                                group: group,
                                count: count,
                                priority: priority,
                                bagSkuCount: bagSkuCount
                            })
                        })
                        deleteDetail(JSON.stringify(arr), $this.closest('tr'))
                    });
                })
                initContractType()
                $(".search").click(searchPromotion);
                $("#productNameInput").keydown(function (event) {
                    if (event.keyCode === 13) {
                        $('.search').click()
                        return false
                    }
                })
                searchPromotion();
            }
        }
    }();
    $(function () {
        $("#header").load("../head.html");
        App.init(); //Initialise plugins and elements
        Promotion.init();
    });
</script>
<!-- /JAVASCRIPTS -->
</body>

</html>